<template>
  <a-spin :spinning="spinLoading">
    <online-form
      ref="onlineFormCompRef"
      :id="formId"
      :disabled="disabled"
      :form-template="formTemplate"
      :isTree="isTreeForm"
      :pidField="pidFieldName"
      @rendered="renderSuccess"
      @success="handleSuccess"
    >
      <template #bottom>
        <div v-if="!disabled && !spinLoading" style="width: 100%; text-align: center; margin-top: 5px">
          <a-button preIcon="ant-design:check" style="width: 126px" type="primary" @click="handleSubmit" :loading="buttonLoading">提 交</a-button>
        </div>
      </template>
    </online-form>
  </a-spin>
</template>
<script lang="ts">
  import OnlineForm from './OnlineForm.vue';
  import { defineComponent, ref, watch, nextTick } from 'vue';
  import { defHttp } from '/@/utils/http/axios';
  import { getRefPromise } from '../../use/useAutoForm';

  export default defineComponent({
    name: 'ProcessOnlineForm',
    components: {
      OnlineForm,
    },
    inheritAttrs: false,
    props: {
      dataId: {
        type: String,
        default: '',
      },
      tableName: {
        type: String,
        default: '',
      },
      taskId: {
        type: String,
        default: '',
      },
      disabled: {
        type: Boolean,
        default: false,
      },
    },
    setup(props) {
      const onlineFormCompRef = ref();
      const formId = ref('');
      const formTemplate = ref(1);
      const isTreeForm = ref(false);
      const pidFieldName = ref('');
      const spinLoading = ref(false);
      watch(
        () => props.tableName,
        (val) => {
          if (!val) {
            return;
          }
          loadFormItems();
        },
        { immediate: true }
      );
      async function loadFormItems() {
        spinLoading.value = true;
        const url = `/api-online/online/cgform/api/getFormItemBytbname/${props.tableName}`;
        const params = { taskId: props.taskId };
        try {
          let result = await defHttp.get({ url, params });
          console.log('动态表单查询结果是：', result);
          formId.value = result.head.id;
          formTemplate.value = Number(result.head.formTemplate || 1);
          isTreeForm.value = result.head.isTree === 'Y';
          pidFieldName.value = result.head.treeParentIdField || '';
          await nextTick(async () => {
            let myForm = await getRefPromise(onlineFormCompRef);
            myForm.createRootProperties(result);
          });
        } catch (e) {
          console.error('流程表单查询异常', e);
        }
      }
      async function renderSuccess() {
        let myForm = await getRefPromise(onlineFormCompRef);
        spinLoading.value = false;
        myForm.show(true, {
          id: props.dataId,
        });
      }
      const buttonLoading = ref(false);
      async function handleSubmit() {
        buttonLoading.value = true;
        onlineFormCompRef.value.handleSubmit();
      }
      function handleSuccess() {
        buttonLoading.value = false;
      }
      return {
        onlineFormCompRef,
        formId,
        formTemplate,
        isTreeForm,
        pidFieldName,
        renderSuccess,
        handleSuccess,
        handleSubmit,
        buttonLoading,
        spinLoading,
      };
    },
  });
</script>
<style scoped></style>
